<!DOCTYPE html>
<html lang="en-us" id="extr-page" ng-app="appLogin">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> 系统登录 </title>
		<meta name="description" content="">
		<meta name="author" content="">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="styles/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/smartadmin-production.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="styles/smartadmin-skins.min.css">

		<!-- SmartAdmin RTL Support is under construction
			 This RTL CSS will be released in version 1.5
		<link rel="stylesheet" type="text/css" media="screen" href="styles/smartadmin-rtl.min.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="styles/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/animate.my.min.css">

		<!-- FAVICONS -->
		<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">


		<!-- Specifying a Webpage Icon for Web Clip
			 Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
		<link rel="apple-touch-icon" href="img/splash/sptouch-icon-iphone.png">
		<link rel="apple-touch-icon" sizes="76x76" href="img/splash/touch-icon-ipad.png">
		<link rel="apple-touch-icon" sizes="120x120" href="img/splash/touch-icon-iphone-retina.png">
		<link rel="apple-touch-icon" sizes="152x152" href="img/splash/touch-icon-ipad-retina.png">

		<!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!-- Startup image for web apps -->
		<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
		<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
		<link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="screen and (max-device-width: 320px)">

	</head>
	<body class="animated fadeInDown" ng-controller="LoginPageController">
    <!-- possible classes: minified, no-right-panel, fixed-ribbon, fixed-header, fixed-width-->

    <header id="header">
        <!--<span id="logo"></span>-->

        <div id="logo-group">
            <span id="logo"> <img src="img/logo.png" alt="SmartAdmin"> </span>

            <!-- END AJAX-DROPDOWN -->
        </div>

        <span id="extr-page-header-space"> <span class="hidden-mobile">没有账户?</span> <a href="register.html" class="btn btn-danger">注册新账户</a> </span>

    </header>

    <div id="main" role="main">

        <!-- MAIN CONTENT -->
        <div id="content" class="container"  ng-controller="UserPageLoginCtrl">

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 hidden-xs hidden-sm">

                </div>
                <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
                    <div class="well no-padding">
                        <form id="login-form" name="loginForm" class="smart-form client-form">
                            <header>
                                登录
                            </header>

                            <fieldset>

                                <section>
                                    <label class="label">邮箱</label>
                                    <label class="input" ng-class="{'state-error':loginForm.email.$dirty && loginForm.email.$invalid}"> <i class="icon-append fa fa-user"></i>
                                        <input type="text" name="email" ng-model="user.username" required placeholder="用户名">
                                        <b class="tooltip tooltip-top-right"><i class="fa fa-user txt-color-teal"></i> 请输入用户名</b>
                                    </label>
                                    <em ng-show="loginForm.email.$dirty && loginForm.email.$invalid" ng-cloak="">请输入有效的用户名</em>
                                </section>

                                <section>
                                    <label class="label">密码</label>
                                    <label class="input" ng-class="{'state-error':loginForm.password.$dirty && loginForm.password.$invalid}"> <i class="icon-append fa fa-lock"></i>
                                        <input type="password" name="password" ng-model="user.password" required ng-minlength="3" placeholder="密码">
                                        <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 输入密码</b> </label>
                                    <em ng-show="loginForm.password.$dirty && loginForm.password.$invalid" ng-cloak="">输入用户密码，密码最小3位</em>
                                    <div class="note">
                                        <a href="forgotpassword.html">忘记密码?</a>
                                    </div>
                                </section>

                                <section>
                                    <label class="label">验证码</label>
                                    <label class="input-group">
                                        <label class="input" ng-class="{'state-error':loginForm.vaildCode.$dirty && loginForm.vaildCode.$invalid}"> <i class="icon-append fa fa-qrcode"></i>
                                            <input type="text" name="captcha" ng-model="user.captcha" required ng-minlength="4" ng-maxlength="4"  placeholder="验证码">
                                            <b class="tooltip tooltip-top-right"><i class="fa fa-lock txt-color-teal"></i> 输入验证码</b>
                                        </label>
                                        <span class="input-group-addon" style="padding:0">
                                            <label>
                                                <span><img style="cursor: pointer;" ng-src="{{vaildCode}}" ng-click="setImage()" height="30" width="140" title="点击换一个" id="vaildCode"></span>
                                            </label>
                                        </span>
                                    </label>

                                    <em ng-cloak ng-show="loginForm.vaildCode.$dirty && loginForm.password.$invalid">验证码输入有误</em>

                                </section>

                                <section>
                                    <label class="checkbox">
                                        <input type="checkbox" name="remember" checked="">
                                        <i></i>记住登录</label>
                                </section>
                                <div id="message" class="alert alert-danger fade in " ng-cloak ng-if="!login_result.flag">
                                    <button class="close" data-dismiss="alert" ng-click="closeErrorDlg();">
                                        ×
                                    </button>
                                    <i class="fa-fw fa fa-times"></i>
                                    <strong ng-bind="login_result.code"></strong> {{login_result.msg}}  {{login_result.result}}
                                </div>
                            </fieldset>
                            <footer>
                                <button type="submit" class="btn btn-primary" ng-disabled="!loginForm.$valid" ng-click="login();">
                                    登录
                                </button>
                            </footer>
                        </form>

                    </div>

                </div>
            </div>
        </div>

    </div>

		<!--================================================== -->	

		<!--[if IE 8]>
			
			<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>
			
		<![endif]-->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="scripts/plugin/layer/layer.min.js"></script>

        <script src="bower_components/requirejs/require.js" data-main="scripts/login-main.js"></script>
	</body>
</html>